<template>
	<view>
		<w-navbar type="normal" background="linear-gradient(60deg, #3d3393 0%, #2b76b9 37%, #2cacd1 65%, #35eb93 100%)">
			<view slot="navbar-center">标签栏</view>
		</w-navbar>
		<pageDemoBlock title="基本用法" color="#1c87e4" :contentStyle="{ padding: '20rpx 0' }">
			<w-tabs :tabsList="tabsList1" :current="current1" @change="tabsChange1"></w-tabs>
		</pageDemoBlock>
		<pageDemoBlock title="滚动标签栏" color="#e44383" :contentStyle="{ padding: '20rpx 0' }">
			<w-tabs :tabsList="tabsList2" :fontSize="32" :iconSize="40" :scrollItemWidth="220" type="scroll"
				:current="current2" @change="tabsChange2"></w-tabs>
		</pageDemoBlock>
		<pageDemoBlock title="带图标(自定义样式)" color="#e40707" :contentStyle="{ padding: '20rpx 0' }">
			<w-tabs :tabsList="tabsList3" type="scroll" activeColor="#fff" :current="current3" @change="tabsChange3"
				background="#39B54A" defaultColor="#fff" :iconSize="64"></w-tabs>
		</pageDemoBlock>
	</view>
</template>

<script>
	import pageDemoBlock from '@/components/page-demo-block';
	export default {
		components: {
			pageDemoBlock
		},
		data() {
			return {
				tabsList1: [{
						name: '关注'
					},
					{
						name: '电影'
					},
					{
						name: '动画'
					},
					{
						name: '游戏'
					}
				],
				current1: 0,
				tabsList2: [{
						icon: 'icon-icon_github-square',
						name: 'Github'
					},
					{
						icon: 'icon-icon_bilibili-square',
						name: 'B站'
					},
					{
						icon: 'icon-icon_TikTok-square',
						name: '抖音'
					},
					{
						icon: 'icon-icon_qq-square',
						name: 'QQ'
					},
					{
						icon: 'icon-icon_wechat-square',
						name: '微信'
					},
					{
						icon: 'icon-icon_taobao-square',
						name: '淘宝'
					},
					{
						icon: 'icon-icon_weibo-square',
						name: '微博'
					}
				],
				current2: 1,
				tabsList3: [{
						icon: 'icon-icon_github-square'
					},
					{
						icon: 'icon-icon_bilibili-square'
					},
					{
						icon: 'icon-icon_TikTok-square'
					},
					{
						icon: 'icon-icon_qq-square'
					},
					{
						icon: 'icon-icon_wechat-square'
					},
					{
						icon: 'icon-icon_taobao-square'
					},
					{
						icon: 'icon-icon_weibo-square'
					}
				],
				current3: 1
			};
		},
		methods: {
			tabsChange1(index) {
				this.current1 = index;
			},
			tabsChange2(index) {
				this.current2 = index;
			},
			tabsChange3(index) {
				this.current3 = index;
			}
		}
	};
</script>

<style lang="scss" scoped></style>
